<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旅游数据分析平台 - X-admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/font.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/xadmin.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/layui/css/layui.css') }}">
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4285f4;
            --secondary-color: #34a853;
            --accent-color: #fbbc05;
            --dark-color: #2c3e50;
            --light-color: #f8f9fa;
            --sidebar-width: 230px;
            --header-height: 60px;
            --transition-speed: 0.3s;
        }

        /* 修复布局高度问题 */
        html, body {
            height: 100%;
            overflow: hidden;
        }

        .layui-layout-body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏优化 */
        .layui-side {
            background: linear-gradient(to bottom, var(--dark-color), #1a2530);
            width: var(--sidebar-width);
            box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1);
        }

        .layui-nav-tree {
            background: transparent;
        }

        .layui-nav-item {
            margin: 8px 15px;
            border-radius: 8px;
            overflow: hidden;
            transition: all var(--transition-speed);
        }

        .layui-nav-item a {
            color: #e0e0e0;
            padding: 15px 20px;
            border-radius: 8px;
            transition: all var(--transition-speed);
        }

        .layui-nav-item a:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            transform: translateX(5px);
        }

        .layui-nav-item a i {
            margin-right: 12px;
            font-size: 18px;
            width: 24px;
            text-align: center;
        }

        .layui-nav-item a cite {
            font-weight: 500;
        }

        .layui-nav-item.layui-nav-itemed > a {
            background: rgba(66, 133, 244, 0.2);
            color: white;
        }

        .layui-nav-child {
            background: rgba(30, 40, 56, 0.9);
            border-radius: 0 0 8px 8px;
        }

        .layui-nav-child dd {
            margin: 0;
        }

        .layui-nav-child a {
            padding: 12px 20px 12px 45px;
            color: #b0bec5;
            font-size: 14px;
        }

        .layui-nav-child a:hover {
            background: rgba(255, 255, 255, 0.08);
            color: white;
        }

        /* 修复右侧内容区域尺寸问题 */
        .layui-body {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: var(--sidebar-width);
            overflow: hidden;
            padding: 0;
            box-sizing: border-box;
        }

        .layui-fluid {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        /* 标签页优化 - 确保内容区域填满 */
        .layui-tab {
            height: 100%;
            margin: 0;
            box-shadow: none;
            display: flex;
            flex-direction: column;
        }

        .layui-tab-title {
            background: white;
            border-bottom: 1px solid #eaeaea;
            padding: 0 15px;
            height: 50px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            flex-shrink: 0; /* 防止标题栏被压缩 */
            z-index: 1;
        }

        .layui-tab-title li {
            border-radius: 8px 8px 0 0;
            margin: 10px 5px 0;
            border: 1px solid transparent;
            border-bottom: none;
            background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
            transition: all var(--transition-speed);
            padding: 0 25px 0 20px;
            height: 40px;
            line-height: 40px;
        }

        .layui-tab-title li:after {
            display: none;
        }

        .layui-tab-title li:hover {
            background: linear-gradient(to bottom, #e9ecef, #dee2e6);
        }

        .layui-tab-title .layui-this {
            background: white;
            border-color: #eaeaea;
            border-bottom-color: white;
            color: var(--primary-color);
            font-weight: 600;
            box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.05);
            position: relative;
            top: 1px;
        }

        .layui-tab-title .layui-this:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--primary-color);
            border-radius: 8px 0 0 0;
        }

        .layui-tab-close {
            margin-left: 10px;
            color: #6c757d;
            transition: color var(--transition-speed);
        }

        .layui-tab-close:hover {
            color: var(--primary-color);
        }

        /* 内容区域自适应 */
        .layui-tab-content {
            flex: 1;
            padding: 0;
            background: white;
            border-radius: 0 0 8px 8px;
            overflow: hidden;
            position: relative;
        }

        .layui-tab-item {
            height: 100%;
            width: 100%;
            padding: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        /* 修复iframe尺寸问题 */
        .x-iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        /* 底部区域优化 */
        .layui-footer {
            background: white;
            color: #6c757d;
            text-align: center;
            padding: 15px;
            border-top: 1px solid #eaeaea;
            font-size: 14px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 1;
        }

        /* 图标悬停效果 */
        .nav-icon {
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .nav-icon:hover {
            transform: scale(1.1);
            color: var(--accent-color);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .layui-side {
                width: 70px;
            }

            .layui-nav-item cite, .layui-nav-more {
                display: none;
            }

            .layui-nav-item a {
                padding: 15px;
                text-align: center;
            }

            .layui-nav-item a i {
                margin-right: 0;
                font-size: 22px;
            }
        }
    </style>
    <!-- 引入ECharts（用于图表渲染） -->
    <script src="{{ url_for('static', filename='lib/echarts/echarts.min.js') }}"></script>
</head>
<body class="layui-layout-body">
<!-- 侧边栏导航 -->
<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="side-nav">
            <!-- 我的桌面 -->
            <li class="layui-nav-item">
                <a href="javascript:;" lay-href="{{ url_for('menu.big_title') }}">
                    <i class="fas fa-desktop nav-icon"></i>
                    <cite>我的桌面</cite>
                </a>
            </li>

            <!-- 信息搜索模块 -->
            <li class="layui-nav-item">
                <a class="" href="javascript:;">
                    <i class="fas fa-search nav-icon"></i>
                    <cite>信息搜索</cite>
                    <span class="layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.seach_data') }}"><i class="fas fa-map-marker-alt me-2"></i>省份城市搜索</a></dd>
                </dl>
            </li>

            <!-- 景点销量分析 -->
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="fas fa-chart-line nav-icon"></i>
                    <cite>景点销量分析</cite>
                    <span class="layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.bar_sales') }}"><i class="fas fa-chart-bar me-2"></i>销量TOP20</a></dd>
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.map_sales') }}"><i class="fas fa-map me-2"></i>省份销量分布</a></dd>
                </dl>
            </li>

            <!-- 4A-5A景点分析 -->
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="fas fa-star nav-icon"></i>
                    <cite>4A-5A景点分析</cite>
                    <span class="layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.bar_star') }}"><i class="fas fa-bars me-2"></i>柱状图分析</a></dd>
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.rose_star') }}"><i class="fas fa-chart-pie me-2"></i>玫瑰图分析</a></dd>
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.map_star') }}"><i class="fas fa-globe-asia me-2"></i>地图分布</a></dd>
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.scatter_star') }}"><i class="fas fa-braille me-2"></i>散点图分析</a></dd>
                </dl>
            </li>

            <!-- 门票价格分析 -->
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="fas fa-tag nav-icon"></i>
                    <cite>门票价格分析</cite>
                    <span class="layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.pie_price') }}"><i class="fas fa-percentage me-2"></i>价格区间占比</a></dd>
                    <dd><a href="javascript:;" lay-href="{{ url_for('menu.scatter_price') }}"><i class="fas fa-dot-circle me-2"></i>价格区间数量</a></dd>
                </dl>
            </li>

            <!-- 景点简介分析 -->
            <li class="layui-nav-item">
                <a href="javascript:;" lay-href="{{ url_for('menu.wordcloud') }}">
                    <i class="fas fa-cloud nav-icon"></i>
                    <cite>景点简介分析</cite>
                </a>
            </li>

            <!-- 退出功能 -->
            <li class="layui-nav-item">
                <a href="javascript:;" id="logout">
                    <i class="fas fa-sign-out-alt nav-icon"></i>
                    <cite>退出</cite>
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- 右侧内容区 -->
<div class="layui-body">
    <!-- 内容主体 -->
    <div class="layui-fluid">
        <!-- Tab标签 -->
        <div class="layui-tab layui-tab-card" lay-filter="content-tab" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="dashboard">
                    <i class="fas fa-home me-1"></i>欢迎页
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!-- 默认显示我的桌面内容 -->
                    <iframe src="{{ url_for('menu.big_title') }}" frameborder="0" class="x-iframe"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部区域 -->
<div class="layui-footer">
    <i class="fas fa-copyright me-1"></i> 2023 旅游数据分析平台 - X-admin
</div>

<!-- 引入JS -->
<script src="{{ url_for('static', filename='js/jquery-3.4.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='lib/layui/layui.js') }}"></script>
<script src="{{ url_for('static', filename='js/xadmin.js') }}"></script>

<!-- 页面交互脚本 -->
<script>
    layui.use(['element', 'layer', 'jquery'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;

        // 侧边栏导航点击事件
        $('a[lay-href]').on('click', function(){
            var url = $(this).attr('lay-href');
            // 优先获取直接文本内容，如果没有则获取cite标签内容
            var title = $(this).text().trim() || $(this).find('cite').text().trim();
            var tabId = url.split('/').pop();
            var iconHtml = $(this).find('i').clone().addClass('me-1').prop('outerHTML') || '';

            // 检查标签页是否已存在
            if($('.layui-tab-title li[lay-id="'+tabId+'"]').length == 0){
                // 新增标签页
                element.tabAdd('content-tab', {
                    title: iconHtml + ' ' + title,
                    content: '<iframe src="'+url+'" frameborder="0" class="x-iframe"></iframe>',
                    id: tabId
                });
            }
            // 切换到该标签
            element.tabChange('content-tab', tabId);
        });

        // 初始化默认加载我的桌面
        element.tabChange('content-tab', 'dashboard');

        // 监听Tab切换（用于页面刷新时保持状态）
        element.on('tab(content-tab)', function(data){
            localStorage.setItem('current_tab', data.index);
        });

        // 页面刷新后恢复上次的Tab
        if(localStorage.getItem('current_tab')){
            element.tabChange('content-tab', localStorage.getItem('current_tab'));
        }

        // 退出功能：清除用户信息并跳转到登录页
        $('#logout').on('click', function() {
            layer.confirm('确定要退出系统吗？', {
                icon: 3,
                title: '退出确认',
                btn: ['确定', '取消']
            }, function(index){
                // 清除用户信息
                localStorage.clear();
                sessionStorage.clear();
                window.location.href = "{{ url_for('auth.login') }}";
                layer.close(index);
            });
        });
    });
</script>
</body>
</html>